<template lang="">
    <div class="box-maxs">
        <div class="box">
            <ul v-if="!emptyList" v-infinite-scroll="load" :infinite-scroll-immediate="false" class="infinite-list"
                style="overflow: auto;" ref="scrollContainer">
                <li v-for="(item, index) in imgArr" :key="index" @click="onVideo(item.videoId)" class="box-img">
                    <el-image style="width: 100%; height: 22rem" :src="item.coverUrl" fit="cover" />
                    <div class="box-card-text">
                        <div class="card-text-num">
                            <p>
                                <font-awesome-icon :icon="['fas', 'heart']" />
                                {{ item.likeCount }}
                            </p>
                            <p>
                                <font-awesome-icon :icon="['fas', 'thumbs-up']" />
                                {{ item.collectionCount }}
                            </p>
                        </div>
                        <div class="card-text-title">
                            <div class="top">
                                <p> {{ item.title }}<span
                                        v-for="(items,indexs) in item.categories">#{{ items.categoryName }}</span>
                                </p>
                            </div>
                            <div class="bottom">
                                <p>@{{ item.author.nickname }}</p>
                                <p>{{ item.time }}</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li  v-for="(item,index) in 10" :key="index" class="skeleton-loding">
                    <el-skeleton class="skeleton" :loading="loading" animated>
                        <template #template>
                            <div>
                                <el-skeleton-item variant="image" style="width: 100%; height: 22rem" />
                                <div style="padding-top: 1rem">
                                    <el-skeleton-item variant="h3" style="width: 100%;margin-top: 0.3rem;" />
                                    <div style="display: flex;align-items: center;justify-items: space-around;margin-top: 1.6rem;height: 16px;">
                                        <el-skeleton-item variant="text" style="margin-right: 16px" />
                                        <el-skeleton-item variant="text" style="width: 30%" />
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template #default>
                        </template>
                    </el-skeleton>
                </li>
            </ul>

            <!-- 空状态 -->
            <div v-if="emptyList" class="box-emptyList">
                <div class="emptyList">
                    <Vue3Lottie ref="emptyLottieContainer" :animationData="emptyJson" height="40%" width="40%" />
                    <p>还没有数据哎！</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router"
import { ref, onMounted, watch } from 'vue'
import { videoCategory } from '@/apis/api/list';
import emptyJson from '../../assets/lottie/empty.json';

const $route = useRoute()
const $router = useRouter()

const categoryId = ref()

const imgArr = ref([])

const page = ref(1)
const pageSize = ref(10)

let requestAwait = false

const loading = ref(true) // 判断是否加载完成后的dom，false为加载完成，true为加载中

const emptyList = ref(false)      // 判断当前数据列表是否为空

onMounted(() => {
    categoryId.value = $route.query.categoryId
    getData()
})

watch(
    () => $route.query,
    (newQuery, oldQuery) => {
        const currentPath = $route.path;     // 目标路径
        const targetPath = '/videolist';       // 当前路径

        if (currentPath !== targetPath) {
            return
        }
        emptyList.value = false
        page.value = 1
        imgArr.value = []
        categoryId.value = newQuery.categoryId
        getData()
    },
    {
        deep: true // 深度监听对象内部的变化
    }
);

const load = () => {
    if (requestAwait) {
        return
    }
    requestAwait = true
    page.value++
    getData()
}

// 定义一个函数用于获取数据
const getData = () => {
  // 构造请求参数
  const params = {
    page: page.value, // 当前页码
    pageSize: pageSize.value, // 每页显示数量
    categoryId: categoryId.value // 分类ID
  }

  loading.value = true // 设置加载状态为true，显示加载中的UI

  // 发起视频分类请求
  videoCategory(params).then(res => {
    requestAwait = false // 设置请求状态为false，表示请求已完成

    if (res.code === 0 && res.data) {
      // 如果请求成功且返回的数据存在
      imgArr.value.push(...res.data) // 将返回的数据追加到imgArr数组中
      loading.value = false // 设置加载状态为false，隐藏加载中的UI
      return
    } else if (res.code === 0 && res.data === null) {
      // 如果请求成功但返回的数据为空
      loading.value = false // 设置加载状态为false，隐藏加载中的UI

      if (!imgArr.value.length) {
        // 如果imgArr数组为空
        emptyList.value = true // 设置emptyList为true，表示显示空列表的UI
        return
      }
    }

    // 防止请求首页时返回为空时循环请求
    if (page.value !== 1) {
      page.value = 0 // 将页码重置为0
      load() // 调用load函数重新加载数据
    }

    loading.value = false // 设置加载状态为false，隐藏加载中的UI
  })
}

const onVideo = (videoId) => {

    $router.push({
        name: "video",
        query: {
            videoId,
            categoryId: categoryId.value,
            page: page.value
        }
    })

}

</script>

<style scoped>
ul {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

.waterfall-item {
    position: absolute;
    left: 0;
    top: 0;
}

.waterfall-item img {
    display: black;
}

.box-maxs {
    width: 100%;
    height: 100%;
    padding: 1rem;
    box-sizing: border-box;
}

.box {
    width: 100%;
    height: 100%;
}

.infinite-list {
    min-height: 84vh;
    height: 84vh;
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.7rem;
}

.scr {
    width: 100%;
    height: 100%;
}

.box-img {
    width: 17.6rem;
    height: 28.6rem;
    margin-bottom: 2rem;
    cursor: pointer;
    border-radius: 1rem;
    overflow: hidden;
    background-color: rgb(245, 245, 245);
    color: rgba(0, 0, 0, 0.9);
    transition: box-shadow 0.3s;
}

.box-img:hover {
    background-color: #626aef;
    color: white;
    box-shadow: 0.8rem 0.8rem 0.8rem rgb(178, 178, 178);
}

.box-img>img {
    width: 100%;
}

.box-card-text {
    display: flex;
    flex-direction: column;
    position: relative;
}

.card-text-num {
    height: 2rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
    align-items: center;
    position: absolute;
    bottom: 100%;
    color: rgba(255, 255, 255, 0.8);
}

p {
    padding: 0;
    margin: 0;
}

.card-text-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.8rem;
}

.card-text-title>.top {
    height: 3rem;
    overflow: hidden;
}

.card-text-title>.bottom {
    display: flex;
    justify-content: space-between;
}

.skeleton {
    width: 100%;
    height: 100%;
}


.skeleton-loding {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.7rem;
}

.skeleton-loding>div {
    width: 17.6rem;
    height: 28.6rem;
    margin-bottom: 2rem;
    cursor: pointer;
    border-radius: 1rem;
    overflow: hidden;
}

.box-emptyList {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emptyList {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.emptyList>p {
    text-align: center;
    font-size: 1.4rem;
}
</style>